<template>
  <!--  帮助中心-->
  <div>
    <div class="container">
      <!--    头部区域-->
      <div class="header">
        <div class="header-text">
          帮助中心
        </div>
        <div class="header-content">
          社区基本问题、绑定问题、跟随问题内容解决，相应的问题可进行查看，若还未解决您的问题可提交客服工单查询处理。
        </div>
      </div>
      <!-- 内容区域-->
      <div class="content" style="">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="item.name" :name="item.id" v-for="(item, index) in helpType" :key="index">
            <div class="container"
              style="background-color: #ffffff; padding: 20px 10px; min-height: 450px; margin: 0 150px 0; margin-bottom: 80px;">
              <el-collapse v-model="activeNames" @change="handleChange" height="600">
                <el-collapse-item :title="detail.title" v-for="(detail, detailIndex) in help" :key="detailIndex">
                  <div v-html="detail.content" style="color: gray;text-align: left;"></div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import detail from '@/views/help/detail'
import detail2 from '@/views/help/detail2'
import detail3 from '@/views/help/detail3'
import detail4 from '@/views/help/detail4'
import { helpTypeApi, helpApi } from '@/api/index'
export default {
  name: 'marketIndex',
  data() {
    return {
      activeName: '',
      helpType: [],
      activeNames: ['1'],
      help: [],
      a: 1
    }
  },
/*   components: {
    detail,
    detail2,
    detail3,
    detail4
  },
 */

  methods: {
    handleClick(tab) {
      // 处理选项卡点击事件
      console.log('Clicked tab:', tab);
      this.gethelp(tab.name); // 获取对应选项卡的详情数据
    },
    handleChange() {
      // 处理详情信息的折叠状态变化
      console.log('Details changed:', this.activeNames);
    },
    gethelpType() {
      // 模拟从后端请求导航栏数据的接口调用
      helpTypeApi().then(res => {
        this.helpType = res.data.data;
        console.log(this.helpType);
        // 设置默认活动选项卡为第一个导航栏数据的 id
        if (this.helpType.length > 0) {
          this.activeName = this.helpType[0].id;
          this.gethelp(this.activeName); // 获取默认选项卡的详情数据
        }
      }).catch(error => {
        console.error('Failed to fetch help type:', error);
      });
    },
    gethelp(id) {
      // 模拟从后端请求详情数据的接口调用
      let data = {
        type_id: id // 使用传入的选项卡的 id 作为请求参数
      };
      helpApi(data).then(res => {
        this.help = res.data.data;
        console.log(this.help);
      }).catch(error => {
        console.error('Failed to fetch help:', error);
      });
    },

  },
  created() {
    // 从后端请求导航栏数据
    this.gethelpType();
  },
}
</script>

<style scoped lang="scss">
.container {
  .header {
    height: 260px;
    background-image: linear-gradient(to bottom, #002748 0%, #002748 30%, #294c69 70%, #294c69 100%);
    color: #ffffff;

    .header-text {
      padding: 80px 160px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 40px;
    }

    .header-content {
      display: flex;
      align-items: center;
      text-align: left;
      padding: 0 160px 30px;
      font-size: 16px;
      line-height: 20px;
    }
  }

  .content {
    background-color: #f4f7fe;
  }
}

/* 
::v-deep .el-collapse-item__content {
  text-align: left !important;
  background-color: white;
  height: 600;
}

::v-deep .el-collapse-item__header {
  font-size: 13px;
}

::v-deep .el-collapse-item {
  font-size: 18px;
  padding-left: 10px;
}

::v-deep .el-collapse-item__header {
  border-top: none;
}

::v-deep .el-collapse__header {
  border-top: none;
  border-bottom: none;
}
 */


::v-deep .el-tabs__nav-scroll {
  background-color: #ffffff !important;
  padding: 5px 10px 0 !important;
  margin: 10px 150px 5px !important;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: #f4f7fe !important;
}

::v-deep .el-tabs__header {
  margin: 0 0 5px;
  text-align: center;
}

::v-deep .el-tabs__item.is-active {
  width: 80px;
  color: #333333;
  font-weight: bold;
  //background-color: skyblue;
  border-bottom: 2px solid black;
}

::v-deep .el-tabs__active-bar {
  background: #333333;
}

/* 鼠标选中时样式 */
::v-deep .el-tabs__item.is-active {
  color: #333333;
  opacity: 1;
}

/* 鼠标悬浮时样式 */
::v-deep .el-tabs__item:hover {
  color: #333333;
  cursor: pointer;
  opacity: 1;
}

::v-deep .el-collapse-item__header {
  position: relative;
  width: 500px;

}

::v-deep .el-collapse-item__header::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000;
  /* Replace #000 with your desired color */
  margin-right: 10px;
}

::v-deep .el-collapse-item.is-active .el-collapse-item__header::before {
  transform: translate(-50%) rotate(90deg);
}

::v-deep .el-tabs__item {
   //background-color: skyblue;
  font-size: 16px;
  font-weight: 100;
  color: #333333;
  padding: 0;
  margin-right: 20px;
}

 ::v-deep .el-tabs__item.is-active {
  border-bottom: 3px solid black;
  color: #333333;
  font-weight: bold;
  text-align: center;
} 

::v-deep .el-tabs__active-bar {
  background: #333333;
}

/* 鼠标悬浮时样式 */
::v-deep .el-tabs__item:hover {
  color: #333333;
  cursor: pointer;
  opacity: 1;
}

::v-deep .el-collapse-item__arrow {
  display: none;
}</style>
